<template>
  <div>
    <div class="divSelectTree">
      <treeselect v-model="value" :multiple="false" :options="options" placeholder="请选择商品类型" :show-count="true"
        :disable-branch-nodes="true" clearable :defaultExpandLevel="1" />
      <pre class="result">{{ value }}</pre>
    </div>
    <div class="divtools">
      <el-button type="primary" size="small" @click="handImport">新增</el-button>
      <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" custom-class="diaglogClass">
        <GoodsImport ref="GoodsImport" @callback="handClose" :category="value"></GoodsImport>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handClose">取 消</el-button>
          <el-button type="primary" @click="handSaveForm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <el-table ref=" singleTable" :data="tableData" highlight-current-row style="width: 100%" border stripe size="small"
      header-align="right">
      <el-table-column property="Name" label="名称" width="220">
      </el-table-column>
      <el-table-column property="Code" label="代号" width="320">
      </el-table-column>
      <el-table-column property="Category" label="类型" width="220">
      </el-table-column>
      <el-table-column property="Price" label="价格" width="80">
      </el-table-column>
      <el-table-column property="Discount" label="折扣" width="120">
      </el-table-column>
      <el-table-column property="Unit" label="单位" width="120">
      </el-table-column>
      <el-table-column property="LastUpdateBy" label="更新人" width="120">
      </el-table-column>
      <el-table-column property="LastUpdateDate" label="更新时间" width="180">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import GoodsImport from './GoodsImport';
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  components: {
    GoodsImport,
    Treeselect
  },
  data() {
    return {
      dialogTitle: '',
      dialogFormVisible: false,
      tableData: [],
      currentRow: null,
      value: null,
      options: []
    }
  },
  methods: {
    // 获取下拉框列表
    getSelectData() {
      const _this = this;
      this.$api.CategoryApi.GetCategoryTree().then(res => {
        if (res.Code) {
          _this.options = res.Result.map(item => {
            item.children = this.filterTree(item.children);
            return item;
          });
        }
      })
    },
    // 获取商品列表
    getGoodsData() {
      const _this = this;
      _this.$api.GoodsApi.GetGoodsList().then(res => {
        if (res.Code) {
          _this.tableData = res.Result;
        }
      })
    },
    handImport() {
      this.dialogTitle = this.value;
      this.dialogFormVisible = true;
    },
    // 保存
    handSaveForm() {
      this.$refs.GoodsImport.SaveData(this.value);
    },
    // 保存完毕 关闭 弹窗
    handClose() {
      this.dialogFormVisible = false;
      // 刷新列表
      this.getGoodsData();
      this.$refs.GoodsImport.ClearData();
    },
    filterTree(arr) {
      var tree = [];
      arr.map(item => {
        if (item.children === null || item.children.lengh === 0) {
          const { children, ...newItem } = item;// 移除children 属性
          tree.push(newItem);
          return newItem;
        } else {
          item.children = this.filterTree(item.children);
          tree.push(item);
        }
      });
      return tree;
    }
  },
  mounted() {
    this.getGoodsData();
    this.getSelectData();
  }

}
</script>
<style lang="less" scoped>
.divSelectTree {
  width: 200px;
}
</style>
